<template>
  <div>
    <!-- 第二步 为 echarts 准备 Dom 区域 -->
    <div id="main2" style="width: 550px;height:600px;"></div>
   </div>
</template>

<script type="text/javascript">
  // 第一步 导入图表组件 echarts
  import * as echarts from 'echarts'
  export default {
       data(){
         return{
           dd:[],
           sj:[],
           jj:[]
         }
       },
      mounted() {
          // 第三步 初始化 echarts
          // var myChart = echarts.init(document.getElementById('main'))
          // 第四步 准备数据和配置项
          var chartDom = document.getElementById('main2');
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            title: {
              text: '进价售价对比图'
            },
            legend: {
              data: ['进价', '售价']
            },
            radar: {
              indicator: [
                { name: 'Sales'},
                { name: 'Administration'},
                { name: 'Information Technology' },
                { name: 'Customer Support'},
                { name: 'Development'},
                { name: 'Marketing' }
              ]
            },
            series: [
              {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                  {
                    value: [],
                    name: '进价'
                  },
                  {
                    value: [],
                    name: '售价'
                  }
                ]
              }
            ]
          };

          option && myChart.setOption(option);

          // 第五步 使用刚指定的配置项和数据显示图表。
          // myChart.setOption(option)
          this.getItemList();
      },
      // created() {
        //1.获取商品列表数据
        // this.getItemList()
      // },
      methods: {

        //实现商品信息分页查询
        async getItemList() {
            var myChart = echarts.init(document.getElementById('main2'))
          const {
            data: result,status:status
          } = await this.$http.get("/charts/showlist")
          console.log(result)
          console.log(result[1].title)
          // this.myChart.setOptions(this.option,true)
          for(var i=0 ;i<result.length;i++){
            this.dd[i]=result[i].title;
            this.sj[i]=(result[i].pricerow)/100;
            this.jj[i]=(result[i].price)/100;
          }
         myChart.setOption({
                     // xAxis: [
                     //   {
                     //     type: 'category',
                     //     // prettier-ignore
                     //     data: this.dd
                     //   }
                     // ],
                     radar: {
                       indicator: this.dd
                     },
                     series: [
                       {
                         name: 'Budget vs spending',
                         type: 'radar',
                         data: [
                           {
                             value: this.jj,
                             name: 'Allocated Budget'
                           },
                           {
                             value: this.sj,
                             name: 'Actual Spending'
                           }
                         ]
                       }
                     ]
                     // series: [
                     //   {
                     //     name: '进价',
                     //     type: 'bar',
                     //     data: this.jj,
                     //     markPoint: {
                     //       data: [
                     //         { type: 'max', name: 'Max' },
                     //         { type: 'min', name: 'Min' }
                     //       ]
                     //     },
                     //     markLine: {
                     //       data: [{ type: 'average', name: 'Avg' }]
                     //     }
                     //   },
                     //   {
                     //     name: '售价',
                     //     type: 'bar',
                     //     data: this.sj,
                     //     markPoint: {
                     //       data: [
                     //         { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                     //         { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                     //       ]
                     //     },
                     //     markLine: {
                     //       data: [{ type: 'average', name: 'Avg' }]
                     //     }
                     //   }
                     // ]
                     });
           console.log(this.dd)
          this.dataname = result.title
         }
       }

  }
</script>

<style>
</style>
